<template>
  <Card>
    <div class="flexCSB">
      <!-- <Button type="primary" @click="getAdd">新增活动</Button> -->
      <div>
        <Select v-model="exhibitionId" @on-change="exhibitionChange" style="width:200px">
            <Option v-for="item in exhibitionList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </div>
    </div>
    <Table
      class="table"
      :loading="loading1"
      highlight-row
      :columns="columns"
      :data="tableData"
    ></Table>
    <Page
      show-total
      class="page"
      :total="total"
      :current.sync="pageNum"
      :page-size="pageSize"
      show-elevator
      @on-change="changePage"
    />
  </Card>
</template>

<script>
export default {
  data () {
    return {
      exhibitionId: '',
      exhibitionList: [{
        id: '',
        name: '全部'
      }],
      columns: [
        {
          title: '头像',
          align: 'center',
          width: 150,
          render: (h, params) => {
            return h('img', {
              style: {
                width: '80px',
                display: 'block',
                marginLeft: "50px",
                marginTop: '10px',
                marginBottom: '10px'
              },
              attrs: {
                src:params.row.headImg
              }
            })
          }
        },
        { title: '昵称', key: 'nickName', align: 'center', width: 150 },
        { title: '展览名称', key: 'exhibition', align: 'center', width: 150 },
        {
          title: '评论内容',
          key: 'content',
          align: 'center'
        },
        { title: '发表时间', key: 'issuingTime', align: 'center', width: 200 },

        {
          title: '审核状态',
          align: 'center',
          width:'100px',
          render: (h, params) => {
            let color = ''
            let content = ''
            if (params.row.states == 1) {
              color = 'yellow'
              content = '待审核'
            }
            if (params.row.states == 2) {
              color = 'green'
              content = '通过'
            }
            if (params.row.states == 3) {
              color = 'red'
              content = '不通过'
            }
            return h(
              'Tag',
              {
                props: { color: color }
              },
              content
            )
          }
        },
        {
          title: '操作',
          align: 'center',
          width: '250px',
          fixed: 'right',
          render: (h, params) => {
            let thorgh = true
            let refuse = true
            if (params.row.states == 1) {
              thorgh = false
              refuse = false
            } else if (params.row.states == 2) {
              thorgh = true
              refuse = false
            } else if (params.row.states == 3) {
              thorgh = false
              refuse = true
            }
            return h('div', [
              h(
                'Button',
                {
                  props: { type: 'success', disabled: thorgh},
                  style: {
                    'margin-left': '10px'
                  },
                  on: {
                    click: () => {
                      this.ok(params)
                    }
                  }
                },
                '通过'
              ),
              h(
                'Button',
                {
                  props: { type: 'error', disabled: refuse},
                  style: {
                    'margin-left': '10px'
                  },
                  on: {
                    click: () => {
                      this.no(params)
                    }
                  }
                },
                '拒绝'
              ),
              h(
                'Button',
                {
                  props: { type: 'error' },
                  style: {
                    'margin-left': '10px'
                  },
                  on: {
                    click: () => {
                      this.del(params)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading1: false
    }
  },
  created () {
    this.getSelector()
    this.getData()
  },
  mounted () {},
  methods: {
    getSelector () {
      this.$http('/ztmuseum/stage/exhibition/selector', {}, 'get', (res) => {
        console.log(res)
        if (res.data.code == 1000) {
          res.data.data.map(item => {
            this.exhibitionList.push(item)
          })
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    // 获取数据
    getData () {
      this.loading1 = true
      this.$http(
        '/ztmuseum/stage/exhibition-comment/getExhibitionCommentList',
        {
          current: this.pageNum,
          size: this.pageSize,
          exhibitionId: this.exhibitionId
        },
        'post',
        (res) => {
          console.log(res)
          if (res.data.code == 1000) {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          } else {
            this.$Message.error(res.data.msg)
          }
          this.loading1 = false
        }
      )
    },
    exhibitionChange () {
      this.pageNum = 1
      this.getData()
    },
    ok (params) {
      console.log(params)
      this.$http('/ztmuseum/stage/exhibition-comment/passExhibitionComment', {
        ids: [params.row.id]
      }, 'post', (res) => {
        if (res.data.code == 1000 && res.data.data) {
          this.$Message.success('已通过')
          this.getData()
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    no (params) {
      this.$http('/ztmuseum/stage/exhibition-comment/refuseExhibitionComment', {
        ids: [params.row.id]
      }, 'post', (res) => {
        if (res.data.code == 1000 && res.data.data) {
          this.$Message.success('已拒绝')
          this.getData()
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    // 删除
    del (params) {
      this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http(
            '/ztmuseum/stage/exhibition-comment/deleteExhibitionComment',
            {
              ids: [params.row.id]
            },
            'post',
            (res) => {
              console.log(res)
              if (res.data.data == true && res.data.code == 1000) {
                this.$Message.success('删除成功')
                // this.reload();
                this.pageNum = 1
                this.getData()
              } else {
                this.$Message.error(res.data.msg)
              }
            }
          )
        })
        .catch(() => {
          this.$Message.error('已取消删除')
        })
    },
    // 分页，改变页码
    changePage (data) {
      console.log(data)
      this.pageNum = data
      this.getData()
    }
  }
}
</script>

<style scoped>
</style>
